<template>
  <base-breadcrumb :breadcrumb="!isAudit">
    <a-card class="mb20">
      <titleName title="危险源辨识" />
      <a-form-model
        ref="ruleForm"
        :model="form"
        :hide-required-mark="true"
        :label-col="{ lg: { span: 6 }, sm: { span: 6 } }"
        :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }"
      >
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="所属公司："
              prop="branchComId"
            >
              <BaseInput
                v-model="form.branchComName"
                disabled
                placeholder="加载中"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="所属项目："
              prop="branchComId"
            >
              <BaseInput
                v-model="form.projectName"
                disabled
                placeholder="加载中"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="会议类型："
              prop="branchComId"
            >
              <BaseInput
                v-model="form.meetingTypeName"
                disabled
                placeholder="加载中"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="会议名称："
              prop="branchComId"
            >
              <BaseInput
                v-model="form.meetingName"
                disabled
                placeholder="加载中"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="会议月份："
              prop="hsemonth"
            >
              <a-month-picker
                v-model="form.hsemonth"
                placeholder="加载中"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="当前施工阶段："
              prop="currentConstructionStage"
            >
              <BaseInput
                v-model.trim="form.currentConstructionStage"
                disabled
                placeholder="加载中"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="主持人："
              prop="branchComId"
            >
              <BaseInput
                v-model="form.speaker"
                disabled
                placeholder="加载中"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="会议时间："
              prop="branchComId"
            >
              <BaseInput
                v-model="form.startTime"
                disabled
                placeholder="加载中"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="会议地点："
              prop="branchComId"
            >
              <BaseInput
                v-model="form.meetingPlace"
                disabled
                placeholder="加载中"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="状态："
              prop="branchComId"
            >
              <BaseInput
                v-if="form.status == 30"
                disabled
                placeholder="加载中"
                value="进行中"
              />
              <BaseInput
                v-if="form.status == 20"
                disabled
                placeholder="加载中"
                value="待开始"
              />
              <BaseInput
                v-if="form.status == 35"
                disabled
                placeholder="加载中"
                value="审批中"
              />
              <BaseInput
                v-if="form.status == 40"
                disabled
                placeholder="加载中"
                value="已完结"
              />
              <BaseInput
                v-if="form.status == 50"
                disabled
                placeholder="加载中"
                value="审批不通过"
              />
            </a-form-model-item>
          </a-col>

          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="参会人数："
              prop="branchComId"
            >
              <span class="flex">
                <BaseInput
                  v-model="form.meetingCount"
                  style="width: 100%"
                  disabled
                  placeholder="加载中"
                />
                <a-button
                  :disabled="isAudit"
                  class="ml20"
                  type="primary"
                  @click="signInVsible = true"
                >查看签到</a-button>
                <a-button
                  v-if="
                    form.meetingTypeCategory != 7 &&
                      form.meetingTypeCategory != 8 &&
                      form.meetingTypeCategory != 9 &&
                      form.status != 35 &&
                      form.status != 40
                  "
                  :disabled="isAudit"
                  class="ml20"
                  type="primary"
                  @click="handlePage"
                >会议大屏</a-button>
              </span>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card class="mb20">
      <div class="flex">
        <titleName title="危险源识别清单" />
        <a-button
          v-if="pageType == 'edit'"
          class="ml20 mt-20"
          type="primary"
          @click="showConfirm()"
        >
          导入上月信息
        </a-button>
        <a-button
          v-if="pageType == 'edit'"
          class="ml20 mt-20"
          type="primary"
          @click="handleUpdate('add')"
        >
          添加新项
        </a-button>
        <a-button
          v-btnPermission="'hse_014_del_03'"
          type="danger"
          :disabled="rowSelection.selectedRowKeys.length < 1"
          class="ml20 mt-20"
          @click="handleUpdate('dels')"
        >
          批量删除
        </a-button>
      </div>

      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :row-selection="rowSelection"
        :row-key="(row) => row.id"
        show-size-changer
        show-quick-jumper
        show-pagination="auto"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a
            :disabled="pageType == 'look'"
            class="base-btn"
            @click="handleUpdate('edit', record)"
          >编辑</a>
          <a-divider type="vertical" />
          <a
            :disabled="pageType == 'look'"
            class="base-btn"
            @click="handleUpdate('del', record)"
          >删除</a>
        </span>
      </s-table>
    </a-card>
    <seeSign
      :id="id"
      :visible="signInVsible"
      @cancel="signInVsible = false"
      @confirm="signInVsible = false"
    />
    <addModal
      :visible="visible"
      :init-data="childInitData"
      @cancel="visible = false"
      @confirm="handleUpdateConfirm"
    />
    <div
      v-if="pageType !== 'look'"
      class="tool-btns page-btn-right-top"
    >
      <!-- <a-button
                type="primary"
                :disabled="form.meetingSummary == ''"
                :loading="loading.DRAFT"
                @click="handleSave('DRAFT')"
                >结束填报</a-button
            > -->
      <a-button
        v-if="pageType == 'start'"
        type="primary"
        :disabled="$userInfo().id !== form.creatorId"
        :loading="loading.START"
        @click="handleSave('START')"
      >
        开始会议
      </a-button>
      <a-button
        v-else
        type="primary"
        :loading="loading.SUBMITTED"
        :disabled="$userInfo().id !== form.creatorId"
        @click="handleSave('SUBMITTED')"
      >
        结束填报
      </a-button>
      <a-button
        type="primary"
        @click="handleClose"
      >
        关闭
      </a-button>
    </div>
    <div
      v-else
      class="tool-btns"
    >
      <a-button
        v-if="checkVisibleInDetail"
        type="primary"
        @click="handleClose"
      >
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>
<script>
import { STable } from '@/components'
import {
    getMeeting,
    getHazardList,
    delHazard,
    delsHazard,
    meetingEmployee,
    importLastMouth,
    colseMeeting,
    startMeeting,
} from '@/api/office/conference'
import seeSign from '@/components/seeSign'
import addModal from './addModal'
import { checkVisibleInDetail } from '@/utils/util'
const columns = [
    {
        title: '序号',
        dataIndex: 'serial',
        width: '5%',
        scopedSlots: { customRender: 'serial' },
    },
    {
        title: '填报者',
        dataIndex: 'creator',
    },
    {
        title: '危险源类别',
        dataIndex: 'typeName',
        ellipsis: true,
    },
    {
        title: '危险源（风险点）',
        dataIndex: 'dangerSource',
        ellipsis: true,
    },
    {
        title: '可能导致的事故',
        dataIndex: 'accident',
        ellipsis: true,
    },
    {
        title: '计划控制措施（具有操作性）',
        dataIndex: 'measures',
        ellipsis: true,
    },
    {
        title: '责任部门/人',
        dataIndex: 'hazardsEmployeesName',
        ellipsis: true,
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
    },
]

export default {
    name:'a'+Date.now(),    components: {
        STable,
        seeSign,
        addModal,
    },
    data() {
        return {
            // 表格复选框配置
            rowSelection: {
                selectedRowKeys: [],
                onChange(selectedRowKeys, selectedRows) {
                    this.selectedRowKeys = selectedRowKeys
                    this.selectedRows = selectedRows
                },
                // getCheckboxProps: (record) => ({
                //     props: {
                //         disabled: record.auditStatus == 'SUBMITTED',
                //     },
                // }),
            },
            checkVisibleInDetail: checkVisibleInDetail(this),
            loading: {
                DELETE: false,
                DRAFT: false,
                SUBMITTED: false,
                IMPORT: false,
                START: false,
            },
            queryParam: { query: { meetingId: '' } },
            loadData: async (parameter) => {
                if (this.id) {
                    const requestParameters = Object.assign({}, parameter, this.queryParam)
                    const [err, res] = await getHazardList(requestParameters)
                    return new Promise((resolve, reject) => {
                        if (err) {
                            reject(err)
                        } else {
                            res.data.forEach((item) => {
                                item.hazardsEmployeesName = item.hazardsEmployeesName.join('/')
                            })
                            console.log(res)
                            resolve(res)
                        }
                    })
                }
            },
            visible: false,
            columns,
            signInVsible: false,
            childInitData: {},

            form: {},
            id: '',
            pageType: '',
        }
    },
    props: {
        isAudit: {
            // 是否作为审批详情
            type: Boolean,
            default: false,
        },
    },
    watch: {
        isAudit: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.$nextTick(() => {
                        this.pageType = 'look'
                    })
                }
            },
        },
    },
    mounted() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
            this.pageType = this.$route.query.pageType
            this.queryParam.query.meetingId = this.id
            this.$refs.table.refresh(true)
            console.log(this.id)
            this.getMeeting()
            this.initTitle()
        }
    },
    methods: {
        initTitle() {
            if (this.pageType == 'edit') {
                this.$route.meta.title = '会议进行中'
            } else {
                this.$route.meta.title = '会议详情'
            }
        },
        async handleSave(status) {
            this.loading[status] = true
            if (this.pageType == 'start') {
                const [err, res] = await startMeeting({ id: this.id })
                this.loading[status] = false
                this.pageType = 'edit'
                this.$refs.table.refresh(true)
                console.log(this.id)
                this.getMeeting()
                this.initTitle()
                return
            }
            const [err, res] = await colseMeeting({ meetingId: this.id })
            this.loading[status] = false
            if (!err) {
                this.$message.success('成功')
                this.handleClose()
            }
        },
        async handleLastMouth() {
            const [err, res] = await importLastMouth({ meetingId: this.id })
            if (!err) {
                console.log(res)
                if (res.data.flag) {
                    this.$message.success(res.data.message)
                } else {
                    this.$message.warning(res.data.message)
                }

                this.$refs.table.refresh(true)
            }
        },
        showConfirm() {
            let that = this
            this.$confirm({
                title: '提示',
                content: '确定需要导入上月信息?',
                onOk() {
                    return that.handleLastMouth()
                },
                onCancel() {
                    console.log('Cancel')
                },
                class: 'test',
            })
        },
        handleUpdateConfirm(e) {
            this.visible = false
            this.$refs.table.refresh(true)
        },

        async delsHazard(type, data) {
            if (type == 'del') {
                const [err, res] = await delHazard({ id: data.id })
                if (!err) {
                    this.$message.success('成功')
                    this.$refs.table.refresh(true)
                }
            } else {
                const [err, res] = await delsHazard({ ids: this.rowSelection.selectedRowKeys })
                if (!err) {
                    this.$message.success('成功')
                    this.$refs.table.refresh(true)
                }
            }
        },
        // 处理更新操作（新增、编辑）
        async handleUpdate(type, data = {}) {
            if (type == 'del' || type == 'dels') {
                let that = this
                this.$confirm({
                    title: '温馨提示',
                    content: '确定是否删除数据？',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk: () => {
                        return that.delsHazard(type, data)
                    },
                })
            } else {
                this.childInitData = {
                    ...data,
                    meetingId: this.id,
                    projectId: this.form.projectId,
                    pageType: type,
                }

                console.log(this.childInitData)
                this.visible = true
            }
        },
        async getMeeting() {
            const [err, res] = await getMeeting({ id: this.id })
            if (!err) {
                this.form = res.data
                if (res.data.status == '50') {
                    this.pageType = 'edit'
                }
            }
        },
        handleClose() {
            if (this.isAudit) {
                window.close()
            } else {
                this.$multiTab.close(this.$route.fullpath)
            }
        },
        handlePage() {
            let routeData = this.$router.resolve({
                path: '/conference/standardConference/conferenceList/conferenceScreen',
                query: {
                    id: this.id,
                },
            })
            window.open(routeData.href, '_blank')
        },
    },
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.tool-btns {
    display: flex;
    justify-content: flex-end;
    @{deep} .ant-btn + .ant-btn {
        margin-left: 12px;
    }
}
.flex {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 40px;
}
.mt-20 {
    margin-top: -20px;
}
</style>